将Kotlin代码编译成Javascript 代码

在Kotlin和Javascript平台的互操作过程中，往往会涉及Kotlin代码和 Javascript 代码相互转换的过程，本文主要介绍如何将Kotlin代码编译成Javascript 代码。

1，创建JavaScript的应用程序

首先创建一个新的应用程序或目标JavaScript模块时，并需要选择Kotlin - JavaScript作为编译运行目标。
这里写图片描述

默认情况下，插件选择与当前安装版本关联的插件。除非我们要创建一个不同的项目，否则我们可以在输入项目名称和位置后点击Finish。
这里写图片描述

项目创建完成后，项目结构如下图所示：

这里写图片描述

2，新建项目

接下来，可以开始编写Kotlin代码。例如：

fun main(args: Array<String>) {
    val message = "Hello JavaScript!"
    println(message)
}

现在需要一个HTML页面来加载代码，所以我们创建一个名为index.html的文件。

编译输出代码说明

将 Kotlin 代码编译为 Javascript 代码后会得到两个主要的文件：

Kotlin.js. ：运行时和标准库，这部分代码只与 Kotlin 的版本有关而不会因为不同的应用而有所不同。
{module}.js：真正的应用代码，所有的应用代码最终都会编译成一个 JavaScript 文件并与模块的名字同名。

除此之外，每一个源码文件都会有一个关联的 {file}.meta.js 元文件，该文件可用来做反射或是其他的功能。Kotlin 编译器将会输出如下代码：
这里写图片描述

而大家最关心的莫过于ConsoleOutput.js，该文件的内容如下：

var ConsoleOutput = function (Kotlin) {
  'use strict';
var _ = Kotlin.defineRootPackage(null, /** @lends _ */ {
    main_kand9s$: function (args) {
      Kotlin.println('Hello JavaScript!');
    }
  });
  Kotlin.defineModule('ConsoleOutput', _);
  _.main_kand9s$([]);
return _;
}(kotlin);

如上代码就是 kotlin main 函数编译后得到的代码，我们可以看到编译后的代码定义了一个函数并赋值给了一个与模块名同名的变量，然后通过传入的 Kotlin 变量来调用 define rootPackage 函数。通过 Kotlin 变量我们可以使用 kotlin.js 标准库中的方法。

编译前的代码只有一个 main 函数，编译之后该函数被添加了后缀，这么做的目的主要是为了防止重载 Kotlin 中的代码，Kotlin 中的这部分功能是为了将源码转换成对应的 javascript 代码。

最后定义为一个立即执行函数，当这部分代码加载之后就会立即执行，并将 Kotlin 做为参数传进去，这样就可以使用 Kotlin.js 中定义的方法了。

运行编译后的代码

这部分代码的目的是为了通过 console 输出文本，在这里我们需要通过 HTML 页面加载并在浏览器中运行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Output</title>
</head>
<body>
<script type="text/javascript" src="out/production/ConsoleOutput/lib/kotlin.js"></script>
<script type="text/javascript" src="out/production/ConsoleOutput/ConsoleOutput.js"></script>
</body>
</html>

注：我们需要先加载 kotlin.js 文件，再加载我们的应用文件。

这里写图片描述

调试应用程序

为了使用IntelliJ IDEA调试应用程序，我们需要执行两个步骤：

安装JetBrains Chrome扩展，它允许通过Chrome在IntelliJ IDEA中进行调试。这对于用IntelliJ IDEA开发的任何类型的Web应用程序都很有用，而不仅仅是Kotlin；
配置Kotlin编译器生成源地图，可通过 Preferences|Kotlin Compiler。

一旦完成，我们只需右键单击我们的index.html文件，然后选择调试选项。这将启动Chrome，然后在IntelliJ IDEA中的代码中定义的断点处停止，我们可以在其中评估表达式，逐步执行代码等。

这里写图片描述

也可以使用标准的Chrome调试器来调试Kotlin应用程序，只要确保你生成源地图。

配置编译器选项

Kotlin提供了一系列可在IntelliJ IDEA中访问的编译器选项。常见的如下：

输出文件前缀。我们可以在编译器生成的输出前加上额外的JavaScript。为了做到这一点，我们在这个框中指出了包含我们想要的JavaScript的文件的名字。
输出文件后缀。同上，但在这种情况下，编译器会将所选文件的内容追加到输出中。
复制运行时库文件。指示我们希望将该kotlin.js库输出到哪个子文件夹中。默认情况下，lib这就是为什么在HTML中我们引用这个路径。
模块种类。指示要遵循的模块标准。这在“ 使用模块”教程中有更深入的介绍。

附：http://kotlinlang.org/docs/tutorials/javascript/getting-started-idea/getting-started-with-intellij-idea.html